<template>
  <div class="flex main">
    <div class="imageBg">
      <n-image width="271" height="270" src="https://m.dumeng.online/uploads/variety1.png" />
     <p class="pt-3 pb-3">二氧化碳灭火器</p>
    </div>
    <div class="imageBg">
      <n-image width="271" height="270" src="https://m.dumeng.online/uploads/variety2.png" />
      <p class="pt-3 pb-3">水基灭火器</p>
    </div>
    <div class="imageBg">
      <n-image width="271" height="270" src="https://m.dumeng.online/uploads/variety3.png" />
      <p class="pt-3 pb-3">干粉灭火器</p>
    </div>
    <div class="imageBg">
      <n-image width="271" height="270" src="https://m.dumeng.online/uploads/variety5.png" />
    <p class="pt-3 pb-3">七氟丙烷灭火器</p>
    </div>
    <div class="imageBg">
      <n-image width="271" height="270" src="https://m.dumeng.online/uploads/variety4.png" />
     <p class="pt-3 pb-3">超细干粉灭火器</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
</script>

<style lang="less" scoped>
  .imageBg {
    width: 382px;
    padding-bottom:10px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
  }
  .main {
    justify-content: space-between;
    flex-wrap: wrap;
  }
</style>
